<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<%@ include file="../include.jsp"%>
<style>
.my-tree-table-box .tree-table-tree-box {
    width: 200px;
    float: left;
}
.my-tree-table-box .tree-table-tree-box ul {
    display: inline-block;
    max-height: 600px;
    vertical-align: top;
    overflow-y: auto;
    overflow-x: auto;
}
.my-tree-table-box .tree-table-table-box {
    display: inline-block;
    vertical-align: top;
    width: 75%;
    margin-left: 20px;
}

.layui-table[lay-skin=line] td{
	height:38px;
    border: 1px solid #e2e2e2;
    background-color: #009688;
    color: #fff;
    text-align: center;
    font-size: 14px;
    border: 1px solid #e2e2e2;
    border-radius: 2px;
    cursor: pointer;
}
.layui-table[lay-skin=line] td.online{
    background-color: #009688;
    color: #fff;
}

.layui-table[lay-skin=line] td.offline{
    background-color: #737575;
    color: #fff;
}  
.layui-table[lay-skin=line] th {
    border: none;
    border-bottom: 1px solid #e2e2e2;
    text-align: center;
}   
    
    
</style>
<fieldset class="layui-elem-field">
  <legend><b>老化测试参数配置</b></legend>
  <div class="layui-field-box">
  	<form class="layui-form layui-form-pane" action="">
        <div class="layui-form-item">
          <label class="layui-form-label">扫描间隔</label>
          <div class="layui-input-inline">
            <input value="1000" type="number" name="scanInterval" id="scanInterval" min="1000" step="100" required="" lay-verify="required" placeholder="请输入扫描时间间隔"  class="layui-input">
          </div>
          <div class="layui-input-inline">
            <input type="checkbox" name="scan" lay-skin="switch" lay-text="开始|停止" lay-filter="scanInterval" value="1">
          </div>
          <div class="layui-form-mid layui-word-aux">
         	 单位ms(毫秒)
          </div>
        </div>
        
        <div class="layui-form-item">
          <label class="layui-form-label">切换间隔</label>
          <div class="layui-input-inline">
            <input value="3" type="number" name="changeInterval" id="changeInterval" min="1" step="1" required="" lay-verify="required" placeholder="请输入自动切换通道间隔"  class="layui-input">
          </div>
          <div class="layui-input-inline">
            <input type="checkbox" name="change" lay-skin="switch" lay-text="开始|停止"  lay-filter="changeInterval" value="1">
          </div>
          <div class="layui-form-mid layui-word-aux">
         	 自动切换通道间隔，单位为2个扫描间隔
          </div>
        </div>
        
        <div class="layui-form-item layui-form-text">
          <label class="layui-form-label">操作信息</label>
          <div class="layui-input-block">
            <textarea placeholder="操作信息" class="layui-textarea" readonly="readonly">
 正在开始老化测试
准备打开各个通讯线程
开始老化测试
老化测试结束
开始上传FTP记录......
开始停止各个通信线程......
退出老化测试,下位机停止运行......
            </textarea>
          </div>
        </div>
      </form>
  </div>
</fieldset>
<blockquote class="layui-elem-quote">
测试启动时刻：2017-04-27 10:13:07 测试当前时刻：2017-04-27 15:13:07
</blockquote>

<div style="width: 100%;">
	<div class="my-tree-table-box">
		<div class="tree-table-tree-box">
			<fieldset class="layui-elem-field layui-field-title"  style="margin:0;">
		  		<legend>MUA列表</legend>
			</fieldset>
		    <!-- tree -->
		    <ul class="layui-nav layui-nav-tree" lay-filter="mau-nav">
		    	<c:forEach items="${maus }" var="mau">
				  <li class="layui-nav-item" data-id="${mau.id }" data-version="${mau.version }">
				  	<a href="javascript:;" title="${mau.decsription }(${mau.ip })">${mau.name }(${mau.ip })</a>
				  </li>
		    	</c:forEach>
		    </ul>
		</div>
	    <div class="tree-table-table-box mauContent">
	        <fieldset class="layui-elem-field layui-field-title"  style="margin : 0;">
		  		<legend>通讯状态</legend>
			</fieldset>
	        <table class="layui-table" lay-skin="line">
			  <colgroup>
			    <col>
			    <col>
			    <col>
			    <col>
			  </colgroup>
			  <thead>
			    <tr>
			      <th>正面(地址1-8)<p>模块名</p>(通讯超时/通讯错误)</th>
			      <th>正面(地址9-16)<p>模块名</p>(通讯超时/通讯错误)</th>
			      <th>正面(地址17-24)<p>模块名</p>(通讯超时/通讯错误)</th>
			      <th>正面(地址25-32)<p>模块名</p>(通讯超时/通讯错误)</th>
			    </tr> 
			  </thead>
			  <tbody>
			    <tr>
			      <td class="offline">
			      	<p>未知</p>
					<p>(<span>0</span>/<span>0</span>)</p>
				  </td>
			      <td class="offline">
			      	<p>未知</p>
					<p>(<span>0</span>/<span>0</span>)</p>
				  </td>
			      <td class="offline">
			      	<p>未知</p>
					<p>(<span>0</span>/<span>0</span>)</p>
				  </td>
			      <td class="offline">
			      	<p>未知</p>
					<p>(<span>0</span>/<span>0</span>)</p>
				  </td>
			    </tr>
			    <tr>
			      <td class="offline">
			      	<p>未知</p>
					<p>(<span>0</span>/<span>0</span>)</p>
				  </td>
			      <td class="offline">
			      	<p>未知</p>
					<p>(<span>0</span>/<span>0</span>)</p>
				  </td>
			      <td class="offline">
			      	<p>未知</p>
					<p>(<span>0</span>/<span>0</span>)</p>
				  </td>
			      <td class="offline">
			      	<p>未知</p>
					<p>(<span>0</span>/<span>0</span>)</p>
				  </td>
			    </tr>
			    <tr>
			      <td class="offline">
			      	<p>未知</p>
					<p>(<span>0</span>/<span>0</span>)</p>
				  </td>
			      <td class="offline">
			      	<p>未知</p>
					<p>(<span>0</span>/<span>0</span>)</p>
				  </td>
			      <td class="offline">
			      	<p>未知</p>
					<p>(<span>0</span>/<span>0</span>)</p>
				  </td>
			      <td class="offline">
			      	<p>未知</p>
					<p>(<span>0</span>/<span>0</span>)</p>
				  </td>
			    </tr>
			    <tr>
			      <td class="offline">
			      	<p>未知</p>
					<p>(<span>0</span>/<span>0</span>)</p>
				  </td>
			      <td class="offline">
			      	<p>未知</p>
					<p>(<span>0</span>/<span>0</span>)</p>
				  </td>
			      <td class="offline">
			      	<p>未知</p>
					<p>(<span>0</span>/<span>0</span>)</p>
				  </td>
			      <td class="offline">
			      	<p>未知</p>
					<p>(<span>0</span>/<span>0</span>)</p>
				  </td>
			    </tr>
			    <tr>
			      <td class="offline">
			      	<p>未知</p>
					<p>(<span>0</span>/<span>0</span>)</p>
				  </td>
			      <td class="offline">
			      	<p>未知</p>
					<p>(<span>0</span>/<span>0</span>)</p>
				  </td>
			      <td class="offline">
			      	<p>未知</p>
					<p>(<span>0</span>/<span>0</span>)</p>
				  </td>
			      <td class="offline">
			      	<p>未知</p>
					<p>(<span>0</span>/<span>0</span>)</p>
				  </td>
			    </tr>
			    <tr>
			      <td class="offline">
			      	<p>未知</p>
					<p>(<span>0</span>/<span>0</span>)</p>
				  </td>
			      <td class="offline">
			      	<p>未知</p>
					<p>(<span>0</span>/<span>0</span>)</p>
				  </td>
			      <td class="offline">
			      	<p>未知</p>
					<p>(<span>0</span>/<span>0</span>)</p>
				  </td>
			      <td class="offline">
			      	<p>未知</p>
					<p>(<span>0</span>/<span>0</span>)</p>
				  </td>
			    </tr>
			    <tr>
			      <td class="offline">
			      	<p>未知</p>
					<p>(<span>0</span>/<span>0</span>)</p>
				  </td>
			      <td class="offline">
			      	<p>未知</p>
					<p>(<span>0</span>/<span>0</span>)</p>
				  </td>
			      <td class="offline">
			      	<p>未知</p>
					<p>(<span>0</span>/<span>0</span>)</p>
				  </td>
			      <td class="offline">
			      	<p>未知</p>
					<p>(<span>0</span>/<span>0</span>)</p>
				  </td>
			    </tr>
			    <tr>
			      <td class="offline">
			      	<p>未知</p>
					<p>(<span>0</span>/<span>0</span>)</p>
				  </td>
			      <td class="offline">
			      	<p>未知</p>
					<p>(<span>0</span>/<span>0</span>)</p>
				  </td>
			      <td class="offline">
			      	<p>未知</p>
					<p>(<span>0</span>/<span>0</span>)</p>
				  </td>
			      <td class="offline">
			      	<p>未知</p>
					<p>(<span>0</span>/<span>0</span>)</p>
				  </td>
			    </tr>
			  </tbody>
			</table>  
			        
			 <table class="layui-table" lay-skin="line">
				  <colgroup>
				    <col>
				    <col>
				    <col>
				    <col>
				  </colgroup>
				  <thead>
				  	<tr>
				      <th>正面(地址33-40)<p>模块名</p>(通讯超时/通讯错误)</th>
				      <th>正面(地址41-48)<p>模块名</p>(通讯超时/通讯错误)</th>
				      <th>正面(地址49-56)<p>模块名</p>(通讯超时/通讯错误)</th>
				      <th>正面(地址57-64)<p>模块名</p>(通讯超时/通讯错误)</th>
					</tr>
				  </thead>
				  <tbody>
				    <tr>
			      <td class="offline">
			      	<p>未知</p>
					<p>(<span>0</span>/<span>0</span>)</p>
				  </td>
			      <td class="offline">
			      	<p>未知</p>
					<p>(<span>0</span>/<span>0</span>)</p>
				  </td>
			      <td class="offline">
			      	<p>未知</p>
					<p>(<span>0</span>/<span>0</span>)</p>
				  </td>
			      <td class="offline">
			      	<p>未知</p>
					<p>(<span>0</span>/<span>0</span>)</p>
				  </td>
			    </tr>
			    <tr>
			      <td class="offline">
			      	<p>未知</p>
					<p>(<span>0</span>/<span>0</span>)</p>
				  </td>
			      <td class="offline">
			      	<p>未知</p>
					<p>(<span>0</span>/<span>0</span>)</p>
				  </td>
			      <td class="offline">
			      	<p>未知</p>
					<p>(<span>0</span>/<span>0</span>)</p>
				  </td>
			      <td class="offline">
			      	<p>未知</p>
					<p>(<span>0</span>/<span>0</span>)</p>
				  </td>
			    </tr>
			    <tr>
			      <td class="offline">
			      	<p>未知</p>
					<p>(<span>0</span>/<span>0</span>)</p>
				  </td>
			      <td class="offline">
			      	<p>未知</p>
					<p>(<span>0</span>/<span>0</span>)</p>
				  </td>
			      <td class="offline">
			      	<p>未知</p>
					<p>(<span>0</span>/<span>0</span>)</p>
				  </td>
			      <td class="offline">
			      	<p>未知</p>
					<p>(<span>0</span>/<span>0</span>)</p>
				  </td>
			    </tr>
			    <tr>
			      <td class="offline">
			      	<p>未知</p>
					<p>(<span>0</span>/<span>0</span>)</p>
				  </td>
			      <td class="offline">
			      	<p>未知</p>
					<p>(<span>0</span>/<span>0</span>)</p>
				  </td>
			      <td class="offline">
			      	<p>未知</p>
					<p>(<span>0</span>/<span>0</span>)</p>
				  </td>
			      <td class="offline">
			      	<p>未知</p>
					<p>(<span>0</span>/<span>0</span>)</p>
				  </td>
			    </tr>
			    <tr>
			      <td class="offline">
			      	<p>未知</p>
					<p>(<span>0</span>/<span>0</span>)</p>
				  </td>
			      <td class="offline">
			      	<p>未知</p>
					<p>(<span>0</span>/<span>0</span>)</p>
				  </td>
			      <td class="offline">
			      	<p>未知</p>
					<p>(<span>0</span>/<span>0</span>)</p>
				  </td>
			      <td class="offline">
			      	<p>未知</p>
					<p>(<span>0</span>/<span>0</span>)</p>
				  </td>
			    </tr>
			    <tr>
			      <td class="offline">
			      	<p>未知</p>
					<p>(<span>0</span>/<span>0</span>)</p>
				  </td>
			      <td class="offline">
			      	<p>未知</p>
					<p>(<span>0</span>/<span>0</span>)</p>
				  </td>
			      <td class="offline">
			      	<p>未知</p>
					<p>(<span>0</span>/<span>0</span>)</p>
				  </td>
			      <td class="offline">
			      	<p>未知</p>
					<p>(<span>0</span>/<span>0</span>)</p>
				  </td>
			    </tr>
			    <tr>
			      <td class="offline">
			      	<p>未知</p>
					<p>(<span>0</span>/<span>0</span>)</p>
				  </td>
			      <td class="offline">
			      	<p>未知</p>
					<p>(<span>0</span>/<span>0</span>)</p>
				  </td>
			      <td class="offline">
			      	<p>未知</p>
					<p>(<span>0</span>/<span>0</span>)</p>
				  </td>
			      <td class="offline">
			      	<p>未知</p>
					<p>(<span>0</span>/<span>0</span>)</p>
				  </td>
			    </tr>
			    <tr>
			      <td class="offline">
			      	<p>未知</p>
					<p>(<span>0</span>/<span>0</span>)</p>
				  </td>
			      <td class="offline">
			      	<p>未知</p>
					<p>(<span>0</span>/<span>0</span>)</p>
				  </td>
			      <td class="offline">
			      	<p>未知</p>
					<p>(<span>0</span>/<span>0</span>)</p>
				  </td>
			      <td class="offline">
			      	<p>未知</p>
					<p>(<span>0</span>/<span>0</span>)</p>
				  </td>
			    </tr>
				  </tbody>
			</table>        
	    </div>
	</div>
</div>

<script type="text/javascript">
	var MAU = {mauId :0 ,version :0 ,scanTime :1000 ,changeTime :3 ,doScan :false ,tasksChedule :null};
	layui.use(['element','form','jquery'], function() {
		var $ = layui.jquery; //重点处
		var form =  layui.form() ;
		var element = layui.element();
		/**由于页面是异步加载  ，这时element的相关功能将不会对其有效，你必须手工执行 init 方法*/
		element.init();
		
      	//监听导航点击
        element.on('nav(mau-nav)', function(elem){
        	var mauId = elem.attr('data-id') ;
        	var version = elem.attr('data-version');
        	MAU.mauId = mauId ;
        	MAU.version = version ;
          	console.log("mauId = "+ mauId+"------- version = " + version);
          	
          	/**任务调度*/
        	doScanData() ;
        });
      	
      	
        form.on('switch(scanInterval)', function(data){
        	$('#scanInterval').removeAttr('disabled') ;
        	MAU.doScam = false ;
        	if(this.checked){
        		var time = $('#scanInterval').val() ;
        		$('#scanInterval').attr('disabled','disabled') ;
        		MAU.scanTime = time ;
        		MAU.doScam = true ;
        	}
        
        	/**任务调度*/
        	doScanData() ;
        });
        form.on('switch(changeInterval)', function(data){
        	$('#changeInterval').removeAttr('disabled') ;
        	if(this.checked){
        		var time = $('#changeInterval').val() ;
        		$('#changeInterval').attr('disabled','disabled') ;
        		MAU.changeTime = time ;
        	}
        	/**任务调度*/
        	doScanData() ;
        });
        
        /***执行扫描****/
        function doScanData(){
        	if(!MAU){
        		layer.msg('MAU参数错误');
        		return  ;
        	}
        	
        	if(MAU.tasksChedule){
        		clearInterval(MAU.tasksChedule);
        	}
        	
        	if(!MAU.doScam){
        		return ;
        	}
        	
        	if(!MAU.mauId || MAU.mauId<1){
        		layer.msg('请选择一个MAU');
        		return  ;
        	}
        	
        	var url = '${ctx}/console/mau/ageing?timestamp=';
        	MAU.tasksChedule = setInterval(function(){
        		var timestamp=new Date().getTime();
        		$.post(url+timestamp,{mauId :MAU.mauId ,version :MAU.version},function(rst){
        			console.debug(rst);
        			if(!rst || 'error' == rst.code){
        				layer.msg(rst.msg|'网络错误，请稍后再试！');
        				return ;
        			}
        			var $mau = rst.data;
        			if(MAU.version < $mau.version){
        				MAU.version = $mau.version ;
        			}
        			
        			if($mau.ageings){
        				$('.mauContent td').removeClass('online').addClass('offline').html('<p>未知</p><p>(<span>0</span>/<span>0</span>)</p>');
        				
        				$.each($mau.ageings,function(i ,node){
        					var $td = $('.mauContent td').eq(node.sn) ;
        					$td.removeClass('offline').addClass('online');
        					$td.find('p').eq(0).html(node.name);
        					$td.find('p span').eq(0).html(node.timeOut);
        					$td.find('p span').eq(1).html(node.error);
        				});
        			}
        			
        		},'json');
        	}, MAU.scanTime) ;
        }
	});
</script>